.item {
  padding-left: 0 !important;

  .item-lf {
    .item-content {
      width: 208px !important;
    }

    .rank {
      width: 47px;
      margin: 6px 0 0;
      line-height: normal;
      text-align: center;

      em {
        font-style: normal;
        color: #999;
      }

      .rnk {
        font-size: 10px;
        line-height: normal;

        .rnk-icon {
          display: inline-block;
          width: 6px;
          height: 6px;
          margin: -1px 2px 0 0;
          vertical-align: middle;
          background: url('@/assets/image/icon.png') no-repeat;
        }

        &.rnk-up {
          color: #ba2226;

          .rnk-icon {
            background-position: -74px -304px;
          }
        }

        &.rnk-dn {
          color: #4abbeb;

          .rnk-icon {
            background-position: -74px -324px;
          }
        }
      }
    }
  }

  &:nth-child(-n+3) {
    .rank em {
      color: #da4545;
    }
  }

  .hot,
  .hot i {
    display: block;
    width: 50%;
    height: 8px;
  }


  .hot {
    width: 100px;
    line-height: normal;
    background: url('@/assets/image/icon-table.png') no-repeat;
    background-position: 0 -240px;

    i {
      padding: 0 4px;
      overflow: hidden;
      background: url('@/assets/image/icon-table.png') no-repeat;
      background-position: right -318px;

      i {
        width: 100%;
        padding: 0 0 0 4px;
        margin-left: -4px;
        background: url('@/assets/image/icon-table.png') no-repeat;
        background-position: 0 -304px;
      }
    }
  }
}
